<!--点击查看图片组件,示例如下：
  <TiyPhotoView v-model="status.modalImage.isShow" :tiy-photo="status.modalImage.url"></TiyPhotoView>
-->
<template>
  <div>
    <Dropdown trigger="hover" @on-visible-change="showHide">
      <div style="min-width: 200px">
        <Button @on-change="inputChange" long>
          {{choosedTerminal}}
          <Icon type="ios-arrow-down"></Icon>
        </Button>
      </div>
      <DropdownMenu slot="list">
        <div style="padding: 0.7rem">
          <ul v-show="datas.length > 0">

            <li v-for="item in filterDatas" v-show="filterModel">
                <a @click="choseValue(item)">{{item.terminalNo == null || item.terminalNo == ""   ? "没有编号" : item.terminalNo}}</a>
            </li>
            <li v-for="item in datas" v-show="!filterModel">
                <a @click="choseValue(item)">{{item.terminalNo == null || item.terminalNo == "" ? "没有编号" : item.terminalNo}}</a>
            </li>
          </ul>
          <div v-show="datas.length == 0" style="padding: 2em;text-align: center">
            查询中…
          </div>
          <div v-show="filterModel && filterDatas.length == 0" style="padding: 2em;text-align: center">
            没有匹配结果
          </div>
          <div v-show="isWebResult && datas.length == 0" style="padding: 2em;text-align: center">
            查询结果为空
          </div>
        </div>

      </DropdownMenu>
    </Dropdown>

  </div>

</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        datas: [],
        filterDatas:[],
        choosedTerminal:"请选择终端",
        filterModel :false,
        isWebResult:false
      }
    },
    props: {
      choosed: {
        id:"",
        name:""
      }
    },
    watch:{
      choosed(value){
        if (value.id !== ""){
          this.choosedTerminal = value.name
        }else{
          this.choosedTerminal = "请选择终端"
        }
      },
      showOptions(value){
        if (value == true){
          if (this.datas.length == 0){
            this.webList()
          }
        }
      },
      choosedTerminal(value){
        if(this.filterModel){

          if (value !== '') {
            setTimeout(() => {
              this.filterDatas = this.datas.filter(item => item.terminalNo !== null && item.terminalNo.indexOf(value) > -1);
            }, 200);
          } else {
            this.filterModel = false;
          }
        }
      }
    },
    methods: {
      showHide(isShow){
        if (isShow){
          if (this.datas.length == 0){
            this.webList()
          }
        }
      },
      webList(){
        var self = this
        this.$apiOther.getTerminalMarks({"pageSize": 500, "pageNum": 1})
          .then(function (response) {
            self.isWebResult = true
            if (response.success) {
              self.datas.splice(0,self.datas.length) ;
              response.result.list.forEach(
                function (item) {
                  self.datas.push(item)
                }
              )
            } else {
              self.$Message.error(response.errorMessage);
            }
          });
      },
      inputChange(){
        this.filterModel = true;
      },
      choseValue(value) {
        this.filterModel = false;
        this.choosedTerminal = value.terminalNo;
        this.$emit('chooseTerminal', value)
      }
    }
  }
</script>

<style lang="less" scoped>
  @import  (once,optional)  "../css/base";
  .tiy_search{
    width: 15em;
  }
  ul {
    list-style: none;
    width: 30em;
  }
  li {
    width: 7em;
    text-align: left;
    padding: 0.5em;
    display: inline;
    line-height: 20px;
    float:left;
  }

  a {color:black;}
  a:link {color:black;}
  a:visited {color:black;}
  a:hover {color:red;}
  a:active {color:black;}

</style>
